import React, { useEffect, useState } from "react";
import { Button, Input, Carousel, Affix, Badge, Calendar } from "antd";
import { DownOutlined } from "@ant-design/icons";
import "./index.scss";
import imgone from "../../assets/1.png";
import imgtwo from "../../assets/2.png";
import imgthree from "../../assets/3.png";
import imgfour from "../../assets/4.png";
import imgfive from "../../assets/5.png";
import imgsix from "../../assets/6.png";
import imgseven from "../../assets/7.png";
import searchone from "../../assets/search.png";
import camera from "../../assets/xj.png";
import news from "../../assets/xin.png";
import small from "../../assets/xiao.png";
import selected from "../../assets/jing.png";

import AinputDraft from "../../components/AinputDraft";
import Acalendar from "../../components/Acalendar";

// 图片懒加载
import LazyLoadImage from "../../components/ALazyLoadImage";
import { useNavigate } from "react-router-dom";
function Create() {
  const navigate = useNavigate();
  const [top] = React.useState(20); //固钉

  const [isInputFocused, setIsInputFocused] = useState(false); //搜索框中的稿定模版
  const onChange = (currentSlide) => {
    console.log(currentSlide);
  };
  // 点击输入框稿定模版出现
  const handleInputFocus = () => {
    setIsInputFocused(true);
  };
  const handleInputBlur = () => {
    setIsInputFocused(false);
  };
  const [isshowcreate, setisshowcreate] = useState(false);
  const [isshowai, setisshowai] = useState(false);
  const [isshowimg, setisshowimg] = useState(false);
  const handleMouseEnter = () => {
    setisshowcreate(true);
  };

  const handleMouseLeave = () => {
    setisshowcreate(false);
  };
  const handleMouseEnter1 = () => {
    setisshowai(true);
  };

  const handleMouseLeave1 = () => {
    setisshowai(false);
  };
  const handleMouseEnter2 = () => {
    setisshowimg(true);
  };

  const handleMouseLeave2 = () => {
    setisshowimg(false);
  };
  const imgs = [
    { img: imgone, title: "小红书" },
    { img: imgtwo, title: "电商" },
    { img: imgthree, title: "公众号" },
    { img: imgfour, title: "教育培训" },
  ];
  const imgs1 = [
    { img: imgfive, title: "零售" },
    { img: imgsix, title: "生活日常" },
    { img: imgseven, title: "行政办公" },
  ];
  const [img11, setimg11] = useState(false);
  const MouseEnter = () => {
    setimg11(true);
  };
  const clickcreate  = ()=>{
      navigate("/Creates/Creates")
  }
  // 日历展示隐藏
  const [iscalendar, setiscalendar] = useState(false);
  const onMouseEnter = () => {
    setiscalendar(!iscalendar);
  };

  const onMouseLeave = () => {
    setiscalendar(false);
  };
  const [val, setval] = useState(null);
  const getvalue = (value) => {
    setval(value);
  };
  return (
    <div style={{ height: "1000px", boxSizing: "border-box" }}>
      <div className="top">
        <div>
          <Affix offsetTop={top} style={{ position: "relative" }}>
            <Input
              placeholder="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;请输入3个以上关键词，搜索更精准"
              style={{ width: "700px", height: "56px" }}
              onClick={handleInputFocus}
            />
            <p style={{ position: "absolute", top: "4%", left: "2%" }}>
              稿定模版
              <DownOutlined />
            </p>
            <Button
              style={{
                width: "94px",
                height: "44px",
                position: "absolute",
                right: "2%",
                top: "10%",
              }}
              type="primary"
            >
              <p style={{ fontSize: "20px" }}>搜索</p>
            </Button>
            <LazyLoadImage
              src={searchone}
              alt=""
              style={{
                width: "24px",
                height: "26px",
                position: "absolute",
                left: "13%",
                top: "16px",
              }}
            />
            <LazyLoadImage
              src={camera}
              alt=""
              style={{
                width: "30px",
                height: "30px",
                position: "absolute",
                right: "110px",
                top: "14px",
              }}
            />
          </Affix>
          {isInputFocused && (
            <div className="isInputFocused" onClick={handleInputFocus}>
              <AinputDraft />
            </div>
          )}
          {/* 日历 */}
          <div className="Acalendar">
            <div className="calendar">
              <div className="calendar-data" onMouseEnter={onMouseEnter}>
                <div className="time">
                  <div className="time-data">
                    <span className="day">{val ? val.$D : "No Date"}</span>
                    <span className="month">
                      /{val ? val.$M + 1 : "No Date"}
                    </span>
                    <span className="year">
                      &emsp;{val ? val.$y : "No Date"}
                    </span>
                  </div>
                  {/* <div className="time-cn">周三 农历腊月十六</div> */}
                  <div className="time-cn">
                    {val ? val.$d.toLocaleDateString() : "No Date"}
                  </div>
                </div>
                <div className="common-banner calendar-banner">
                  <img
                    style={{
                      width: "20px",
                      height: "20px",
                      position: "relative",
                      top: "4px",
                    }}
                    src=""
                    alt=""
                  />
                  <span>开工大吉</span>
                </div>
              </div>
            </div>
            {iscalendar && (
              <div className="calendar-calendar" onMouseLeave={onMouseLeave}>
                <Acalendar onValue={getvalue} />
                <div className="calendar-calendar-right">
                  <h3>营销模版直通车</h3>
                  <ul>
                    <li>2月05日</li>&emsp;&emsp;&emsp;&emsp;
                    <li>今天</li>
                  </ul>
                  <p>
                    <span style={{color:'#1261FF'}}>|</span>
                    开工大吉
                  </p>
                  
                  <ul>
                    <li>2月10日</li>&emsp;&emsp;&emsp;&emsp;
                    <li>剩5天</li>
                  </ul>
                  <p>
                    <span style={{ color: "#026B10" }}>|</span>
                    国际气象节
                  </p>
                  <ul>
                    <li>2月12日</li>&emsp;&emsp;&emsp;&emsp;
                    <li>剩7天</li>
                  </ul>
                  <p>
                    <span style={{ color: "#FF6E00" }}>|</span>
                    元宵节
                  </p>
                  <ul>
                    <li>2月14日</li>&emsp;&emsp;&emsp;&emsp;
                    <li>剩9天</li>
                  </ul>
                  <p>
                    <span style={{ color: "#0EABA1" }}>|</span>
                    214情人节
                  </p>
                  <ul>
                    <li>2月18日</li>&emsp;&emsp;&emsp;&emsp;
                    <li>剩13天</li>
                  </ul>
                  <p>
                    <span style={{ color: "#0EABA1" }}>|</span>
                    雨水
                  </p>
                  <ul>
                    <li>2月22日</li>&emsp;&emsp;&emsp;&emsp;
                    <li>剩17天</li>
                  </ul>
                  <p>
                    <span style={{ color: "#FF6E00" }}>|</span>
                    填仓节
                  </p>
                  
                </div>
              </div>
            )}
          </div>
        </div>

        <div style={{ marginLeft: "1%" }}>
          <Carousel className="carousel" dots={false} arrows infinite={false}>
            <div className="div">
              {imgs.map((item, index) => {
                return (
                  <div key={index}>
                    <dl>
                      <dt>
                        <LazyLoadImage src={item.img} alt="" />
                      </dt>
                      <dd>
                        <span>{item.title}</span>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </div>
            <div className="div">
              {imgs1.map((item, index) => {
                return (
                  <div key={index}>
                    <dl>
                      <dt>
                        <LazyLoadImage src={item.img} alt="" />
                      </dt>
                      <dd>
                        <span>{item.title}</span>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </div>
          </Carousel>
        </div>
      </div>
      <div className="hot" onClick={handleInputBlur}>
        <h4 style={{ fontSize: "20px" }}>热门推荐</h4>
        <div style={{ display: "flex" }}>
          <Carousel
            style={{
              width: "600px",
              height: "160px",
              position: "relative",
              marginTop: "-20px",
            }}
            afterChange={onChange}
            dots={true}
          >
            <LazyLoadImage
              src="https://gaoding-market.dancf.com/market-operations/market/side/6d2a6f61c85c4ccf8141003e29bced7e/1732689591234.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="精选模版新人专题"
            />
            <LazyLoadImage
              src="https://gaoding-market.dancf.com/market-operations/market/side/cff6c641c36a4ab5ab09a08d1720ff2c/1736300982817.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="文字列表升级"
            />
            <LazyLoadImage
              src="https://gaoding-market.dancf.com/market-operations/market/side/d426bda084f24f09840c9a823139324d/1736160485262.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="AI商品背景-新年主题上线"
            />
            <LazyLoadImage
              src="https://gaoding-market.dancf.com/market-operations/market/side/c04f84856259470682bb18415c318c2c/1735893638182.png?x-oss-process=image/resize,w_600/interlace,1/format,webp"
              alt="小编精选"
            />

          </Carousel>
          <LazyLoadImage
            src={news}
            className="img1"
            alt=""
            onMouseEnter={MouseEnter}
          />
          {img11 && (
            <div className="hot-div">
              10w+质感模版<p>→</p>
            </div>
          )}

          <LazyLoadImage
            src={selected}
            alt=""
            className="img1"
            style={{ marginLeft: "8px" }}
          />
          <LazyLoadImage
            src={small}
            alt=""
            className="img1"
            style={{ marginLeft: "-1px" }}
          />
        </div>
      </div>
      <div className="create">
        <h4 style={{ fontSize: "20px" }}>创作工具</h4>
        <div style={{ display: "flex" }}>
          <div className="left" onClick={clickcreate}>
            <div
              className="left-left"
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              <div>
                <p>+</p>
                <p>创建设计</p>
                <p className="start">开始你的创意</p>
              </div>
              {isshowcreate && (
                <div className="hover-container">
                  <p className="des">创建设计&gt;</p>
                  <img
                    className="createimg"
                    src="https://gaoding-market.dancf.com/market-operations/market/side/30f32b644edc43cea94b483990ad33cf/1735284089157.jpg?x-oss-process=image/resize,h_172/interlace,1/format,webp"
                    alt=""
                  />
                </div>
              )}
            </div>
            <div
              className="left-center"
              onMouseEnter={handleMouseEnter1}
              onMouseLeave={handleMouseLeave1}
            >
              <div>
                <p>+</p>
                <p>AI设计</p>
                <p className="start">探索创造极限</p>
              </div>
              {isshowai && (
                <div
                  onMouseEnter={handleMouseEnter1}
                  onMouseLeave={handleMouseLeave1}
                  className="hover-container"
                >
                  <p className="des">AI设计&gt;</p>
                  <img
                    className="createimg"
                    src="https://gaoding-market.dancf.com/market-operations/market/side/6af441a840764f83ab1ecb49cb86a36e/1735284103806.jpg?x-oss-process=image/resize,h_172/interlace,1/format,webp"
                    alt=""
                  />
                </div>
              )}
            </div>
            <div
              className="left-right"
              onMouseEnter={handleMouseEnter2}
              onMouseLeave={handleMouseLeave2}
            >
              <div>
                <p>+</p>
                <p>图片编辑</p>
                <p className="start">全能图片处理工具</p>
              </div>
              {isshowimg && (
                <div
                  onMouseEnter={handleMouseEnter2}
                  onMouseLeave={handleMouseLeave2}
                  className="hover-container"
                >
                  <p className="des">图片编辑&gt;</p>
                  <img
                    className="createimg"
                    src="https://gaoding-market.dancf.com/market-operations/market/side/81c70aa8a51044a589316fc9d8e0dcd1/1735284115461.jpg?x-oss-process=image/resize,h_172/interlace,1/format,webp"
                    alt=""
                  />
                </div>
              )}
            </div>
          </div>
          <div className="right">
            <div
              className="right-left"
              // onMouseEnter={handleMouseEnter}
              // onMouseLeave={handleMouseLeave}
            >
              {/* <div className="right-left-top">
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/18601f47556f47838cd4212eb2274614/1733479653969.png?x-oss-process=image/resize,h_40/interlace,1" alt="" />
              <p >AI抠图</p>

            </div>
            <div className="right-left-bottom">
              <img src="https://gaoding-market.dancf.com/market-operations/market/side/18601f47556f47838cd4212eb2274614/1733479653969.png?x-oss-process=image/resize,h_40/interlace,1" alt="" />
              <p >AI抠图</p>
            </div>
            {isshowcreate && (
              <div className="hover-container">
                <p className="des">创建设计&gt;</p>
                <img
                  className="createimg"
                  src="https://gaoding-market.dancf.com/market-operations/market/side/30f32b644edc43cea94b483990ad33cf/1735284089157.jpg?x-oss-process=image/resize,h_172/interlace,1/format,webp"
                  alt=""
                />
              </div>
            )} */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Create;
